<template>
  <div class="hello">
    <h2 :style="{color:color}">{{ msg }}</h2>
    <router-link to="/validate">表单验证</router-link>
    <router-link to="/datetimepicker">日期/时间</router-link>
    <router-link to="/lunbo">轮播图</router-link>
    <router-link to="/lazyload">图片懒加载</router-link>
    <router-link to="/actionsheet">上拉菜单</router-link>
    <router-link to="/mtloadmore">下拉刷新上拉加载</router-link>
    <router-link to="/pickerslot">三级联动</router-link>
    <router-link to="/parenttochild">父→子传值</router-link>
    <router-link to="/childtoparent">子→父传值</router-link>
    <router-link to="/elepassbyvalue">非父子传值</router-link>
    <router-link to="/parentcallchild">父调子方法</router-link>
    <router-link to="/productlist">路由传参</router-link>
  </div>

</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to vue-mint demo',
      color:'#f00',
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@function aWidth(){
  @return 30%;
}
.hello{
  h2{margin-bottom: 20px;}
  a{
    display: inline-block;width: aWidth();height: 30px;text-align: center;line-height: 30px;
    text-decoration: none; color: #000;font-size: 12px;
  }
}
</style>
